<template>
<p>{{ msg }}</p>
<!-- <button v-on:click="">您点击了{{ count }}次</button> -->
 <!-- 
    v-on:可以简写成@
    例如:@click相当于v-on:click
 -->
<button @click="inrement">您点击了{{ count }}次</button>
</template>

<script>
// 导入ref函数来声明响应式状态
// 简单来讲,ref函数主要用于定义数据
import { ref } from 'vue';
export default{
    // setup()用于在组件中使用组合式的API,属于组合式API的入口函数,通常只在以下情况下使用
    // 1.需要再飞单文件组件中使用组合式API时
    // 2.需要再基于选项式API的组件中集成基于组合式API的代码时
    setup(){
        const msg = ref('Hello Composition')
        const count = ref(0)
        // msg = ref("Hello World");   // 报错

        msg.value = ref("Hello World")

        function inrement(){
            // count++;
            count.value++;
        }

        // 返回值会暴露给模板和其他选项式API
        return {
            msg,
            count,
            inrement
        }
    }
}
</script>